<template>
    <div>
        <el-main style="line-height:30px;overflow:auto;height: 1000px;" class="main infinite-list"
            v-infinite-scroll="load">
            <el-row :gutter="20">
                <el-col :span="6" :offset="9">
                    <el-form ref="form" :model="form" label-width="80px">
                        <el-input placeholder="请输入内容" v-model="form.input">
                            <el-button slot="append" icon="el-icon-search" @click="getData(true)"></el-button>
                        </el-input>
                    </el-form>
                </el-col>
                <el-col :span="16" :offset="4">
                    <el-carousel :interval="3000" type="card" height="200px">
                        <el-carousel-item v-for="item in items" :key="item.index">
                            <img :src="item.url" alt="失败" style="object-fit:cover;width: 490px;height: 200px;">
                        </el-carousel-item>
                    </el-carousel>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <!-- <div v-for="( smallData,index) in nowData" :key="index" class="infinite-list-item"> -->
                    <!-- <el-col :offset="4" v-if="this.parentNode.key%2==1"></el-col> -->
                    <el-col :span="9" :offset="2" style="display:inline-block" v-for="( smallData,index) in nowData" :key="index" class="infinite-list-item" @click.native="toMarketer(smallData)">
                        <el-row :gutter="20">
                            <el-card shadow="hover" style="min-height:200px">
                                <el-col :span="6">
                                    <el-image style="width:200px; height:200px;" src="/images/food2.jpg"
                                        fit="cover"></el-image>
                                </el-col>
                                <el-col :span="16" :offset="2">
                                    <span class="name" v-html="smallData.storeName"></span>
                                    <br>
                                    <span class="appraise">5.0分</span>
                                    <br>
                                    <span class="sail">月售3000份</span>

                                    <br>
                                    <span class="sail">起送10￥  配送费2￥</span>
                                    <!-- <br>
                                    <div>
                                        <el-button type="warning" @click="shoppingCart(smallData)">加入购物车</el-button>
                                        <el-button type="danger" @click="buy(smallData)">直接购买</el-button>
                                        <span class="price">￥{{smallData.price}}</span>

                                    </div> -->

                                </el-col>
                            </el-card>
                        </el-row>
                    </el-col>
                <!-- </div> -->
                <el-col :span="24" style="line-height:10px">
                    <el-button class="end" type="text"> 玩命加载中...</el-button>
                </el-col>
            </el-row>
            <div id="triangle" @click="backTop"></div>
        </el-main>
    </div>
</template>
<script>
import { getMarketerPageData} from '@/utils/modules/customer.js'
export default {
    mounted() {
        this.getData()
    },
    data() {
        return {
            form: {
                input: '',
                nownum:0,
                wantnum:8
            },
            items: [
                { url: require("../../../assets/lunbotu/清新沙拉轻食外卖店招@凡科快图.jpg") },
                { url: require("../../../assets/lunbotu/烧烤串串烤肉外卖横幅@凡科快图.jpg") },
                { url: require("../../../assets/lunbotu/红色螺蛳粉外卖横幅@凡科快图.jpg") },
                { url: require("../../../assets/lunbotu/黄色蛋糕甜品外卖横幅@凡科快图.jpg") },
                { url: require("../../../assets/lunbotu/黄色饮品果汁外卖横幅@凡科快图.jpg") },
                { url: require("../../../assets/lunbotu/黄色麻辣火锅外卖横幅@凡科快图.jpg") },
                { url: require("../../../assets/lunbotu/黑色麻辣火锅外卖店招横幅@凡科快图.jpg") }
            ],
            key: 0,
            totalNum: 0,
            nowData: [],
            ended:false

        }
    },
    methods: {
        getData(flag) {
            if(flag){
                this.form.nownum = 0
                this.nowData = []
            }
            getMarketerPageData(this.form).then(res => {
                let data = JSON.parse(JSON.stringify(res.data.itemList))
                let length = res.data.itemList.length
                this.form.nownum += length
                console.log(res)
                for (let i = 0; i < length; i++) {
                    this.nowData.push(data[i])
                }
                if (length < this.form.wantnum) {
                    // alert('到底啦')
                    this.ended = true
                    let end = document.querySelector(".end")
                    end.innerHTML = "到底啦"
                }
            }).catch(err => {
                this.$message({
                    type: 'error',
                    message: err.message,
                    showClose: true
                })
            })
        },
        toMarketer(val){
            console.log(val)
            this.$router.push({
                query:{
                    id:val.id
                },
                path:'/Customer/marketer'
            })
        },
        load() {
            if(this.ended == false && this.form.nownum != 0){
                // this.count += 2
                console.log(this.form.nownum)
                this.getData(false)
            }

        },
        backTop() {
            let main = document.querySelector(".main")
            main.scrollTo({
                top: 0,
                behavior: 'smooth'
            })
        },

    }
}
</script>
<style>
.item {
    margin-top: 10px;
    margin-right: 40px;
}

.el-header,
.el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
}

.el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
}

.el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
}

#triangle {
    width: 0;
    height: 0;
    border: 30px solid transparent;
    border-bottom-color: #000;
    position: fixed;
    bottom: 20px;
    right: 20px;
    /* display: none; */
}
#toBuy{
    position: fixed;
    bottom: 150px;
    right:30px
}

/* 名字 */
.name {
    font-weight: 500;
    font-size: large;
    padding-left: 50%;
}

/* 评分 */
.appraise {
    font-size: small;
    color: red;
    font-weight: 100;
    padding-left: 50%;
}

/* 月售 */
.sail {
    font-size: small;
    font-weight: 100;
    color: #475669;
    padding-left: 50%;
}
.price{
    font-size: larger;
    font-weight: 600;
    color: red;
}
</style>